<template>
  <div class="shopping-cart">
    <!-- 使用公共页头组件 -->
    <CommonHeader title="我的订单" />
    
    <!-- 购物车内容 -->
    <div class="product-container">
      <div v-if="lists.length" class="cart-content">
        <!-- 购物车表头 -->
        <div class="cart-header">
          <div class="cart-col col-check">
            <input type="checkbox" v-model="checkAll" @change="checkAllchange()">
            <span>全选</span>
          </div>
          <div class="cart-col col-picture">商品图片</div>
          <div class="cart-col col-name">商品名称</div>
          <div class="cart-col col-price">单价</div>
          <div class="cart-col col-num">数量</div>
          <div class="cart-col col-total">小计</div>
        </div>
        
        <!-- 购物车商品列表 -->
        <div class="cart-items">
          <div v-for="(item, index) in lists" :key="item.id" class="cart-item">
            <div class="cart-col col-check">
              <input type="checkbox" v-model="item.check" @change="curChange()">
            </div>
            <div class="cart-col col-img">
              <img :src="item.img" alt="商品图片" width="80" height="80">
            </div>
            <div class="cart-col col-name">
              <h3 class="item-name">{{ item.name }}</h3>
              <span class="item-desc">{{ item.desc }}</span>
            </div>
            <div class="cart-col col-price">
              <span>{{ item.price | currency }}</span>元
            </div>
            <div class="cart-col col-num">
              <div class="quantity-controller">
                <button class="quantity-btn" @click="sub(index)">
                  -
                  <i class="fa fa-minus"></i>
                </button>
                <input type="number" class="quantity-input" :value="item.count" @change="updateCount(index, $event)">
                <button class="quantity-btn" @click="add(index)">
                  +
                  <i class="fa fa-plus"></i>
                </button>
              </div>
            </div>
            <div class="cart-col col-total">
              <span class="item-total">{{ (item.count * item.price) | currency }}</span>元
            </div>
            <div class="cart-col col-action">
              <button class="delete-btn" @click="del(item.id)">
                <i class="fa fa-trash"></i> 删除
              </button>
            </div>
          </div>
        </div>
        
        <!-- 购物车底部 -->
        <div class="cart-footer">
          <div class="footer-left">
            <a @click="comeToGoodsPage" class="back-btn">
              <i class="fa fa-arrow-left"></i> 继续购物
            </a>
            <span class="cart-summary">
              共 <span class="total-count">{{ lists.length }}</span> 件商品，已选择 <span class="selected-count">{{ checkNumber }}</span> 件
            </span>
          </div>
          <div class="footer-right">
            <span class="total-amount">
              合计: <span class="price">{{ total | currency }}</span> 元
            </span>
            <button class="checkout-btn">
              <i class="fa fa-shopping-cart"></i> 去结算
            </button>
          </div>
        </div>
      </div>
      
      <!-- 购物车为空 -->
      <div v-else class="empty-cart">
        <div class="empty-icon">
          <i class="fa fa-shopping-cart"></i>
        </div>
        <h3 class="empty-text">购物车为空</h3>
        <a @click="comeToGoodsPage" class="empty-cta">
          <i class="fa fa-arrow-left"></i> 返回商品页
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import CommonHeader from './CommonHeader.vue'

export default {
  components: {
    CommonHeader
  },
  computed: {
    ...mapState({
      lists: state => state.shopcart.items
    }),
    ...mapGetters('shopcart', { 
      total: 'totalPrice', 
      checkNumber: 'checkNumber',
      checkAll: 'checkAll'
    }),
  },
  methods: {
    ...mapActions('shopcart', ['del']),
    
    // 更新商品数量
    updateCount(index, event) {
      const newCount = parseInt(event.target.value)
      if (newCount >= 1) {
        this.$store.commit('shopcart/UPDATE_COUNT', { 
          id: this.lists[index].id, 
          count: newCount 
        })
      }
    },
    
    // 全选状态变更（修改为直接commit）
    checkAllchange() {
      this.$store.commit('shopcart/SET_CHECK_ALL', this.checkAll);
    },
    
    // 当前商品选择变更（修改为直接commit）
    curChange() {
      const allChecked = this.lists.every(item => item.check);
      this.$store.commit('shopcart/SET_CHECK_ALL_STATE', allChecked);
    },
    
    comeToGoodsPage() {
      this.$router.push('/goods')
    }
  },
  filters: {
    currency(value) {
      return '¥ ' + value
    }
  }
}
</script>

<style scoped>
/* 购物车内容样式 */
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.cart-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.cart-header {
  display: grid;
  grid-template-columns: 0.5fr 3fr 1fr 1.5fr 1fr 0.5fr;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  color: #555;
}

.cart-items {
  padding: 10px 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 0.5fr 3fr 1fr 1.5fr 1fr 0.5fr;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.cart-item:hover {
  background-color: #f9f9f9;
}

.cart-col {
  display: flex;
  align-items: center;
}

.col-check {
  display: flex;
  align-items: center;
}

.col-img img {
  border: 1px solid #eee;
  border-radius: 4px;
}

.col-name {
  flex-direction: column;
  align-items: flex-start;
}

.item-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.item-desc {
  font-size: 14px;
  color: #666;
}

.col-price, .col-total {
  justify-content: center;
  font-weight: 500;
}

.item-total {
  color: #e74c3c;
}

.quantity-controller {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quantity-btn:hover {
  background-color: #eaeaea;
}

.quantity-input {
  width: 50px;
  height: 30px;
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  text-align: center;
  outline: none;
}

.col-action {
  justify-content: center;
}

.delete-btn {
  background-color: transparent;
  color: #e74c3c;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.delete-btn:hover {
  color: #c0392b;
}

/* 购物车底部样式 */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 0 0 8px 8px;
}

.footer-left {
  display: flex;
  align-items: center;
}

.back-btn {
  text-decoration: none;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.back-btn:hover {
  background-color: #2980b9;
}

.cart-summary {
  font-size: 14px;
  color: #666;
}

.total-count, .selected-count {
  color: #e74c3c;
  font-weight: bold;
}

.footer-right {
  display: flex;
  align-items: center;
}

.total-amount {
  margin-right: 20px;
  font-size: 16px;
}

.price {
  color: #e74c3c;
  font-size: 20px;
  font-weight: bold;
}

.checkout-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.checkout-btn:hover {
  background-color: #c0392b;
}

/* 购物车为空样式 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  text-align: center;
}

.empty-icon {
  font-size: 60px;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 20px;
  color: #666;
  margin-bottom: 20px;
}

.empty-cta {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.empty-cta:hover {
  background-color: #2980b9;
}
</style>